<template>
  <div class="container">
    <canvas id="gamer-render" />
  </div>
  <button class="actions retry" disabled>Try Again ?</button>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import queryString from 'query-string'
import { Lib } from '../lance'
import ClientEngine from './engine'
import WiggleGameEngine from '../common/WiggleGameEngine'
const qsOptions = queryString.parse(location.search)

const defaults = {
  traceLevel: Lib.Trace.TRACE_NONE,
  delayInputCount: 5,
  scheduler: 'render-schedule',
  syncOptions: {
    sync: qsOptions.sync || 'extrapolate',
    localObjBending: 0.8,
    remoteObjBending: 0.8,
    bendingIncrements: 6
  }
}
let options = Object.assign(defaults, qsOptions)
const gameEngine = new WiggleGameEngine(options)
const clientEngine = new ClientEngine(gameEngine, options)
onMounted(() => {
  clientEngine.start()
})
</script>

<style>
body {
  background-color: CornflowerBlue;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: white;
  font-family: 'Courier', Courier, sans-serif;
  font-size: 20px;
}
a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

canvas {
  width: 100%;
  height: 100%;
  position: absolute;
}

.container {
  margin: 10px;
  display: inline-block;

  &.bottomRight {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}

.actions {
  &.retry {
    font-family: 'Courier', Courier, sans-serif;
    font-size: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    pointer-events: none;
    border-radius: 4px;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    background-color: rgba(#68b2f8, 0.2);
    padding: 0.2rem 1.8rem 0.1rem 1.8rem;
    font-size: 1.2rem;
    transition: all 0.5s ease-out;
    border: 1;
    border-style: solid;
    box-shadow: none;
    background-color: transparent;
    color: white;
    outline: none;
    white-space: nowrap;
  }
}
.lostGame #tryAgain {
  opacity: 1;
  pointer-events: all;
}
</style>
./engine/engine
